
/* ChaoX desktop */

html{background-color: #FFF; color: #333; }
html body{overflow: auto;}

/* layui重写 */
.layui-main{width: 1000px;}
.layui-form{margin-top: 30px;}
.layer-notice{float:left;overflow:hidden;background:#5FB878;padding:10px;}
.layer-notice li{ line-height:25px;color:#fff;}

/* 自定义 */
.m-banner {height: 200px;background: #FFF;}



/* 头部 */
.header{height: 60px; border-bottom: 1px solid #404553;}
.header .logo{position: absolute; left: 0; top: 16px;}
.header .layui-nav{position: absolute; right: 0; top: 0; padding: 0; background: none;}
.header .layui-nav .layui-nav-item{line-height: 61px;}
.header .layui-nav .layui-nav-item a{padding: 0 10px;}
.header .avatar {width: 42px;height: 42px;border-radius: 100%;}
.header cite {margin-left: 10px;}


/* 脚部 */
.footer{margin-top: 20px;padding: 20px 0;line-height: 24px;background-color: #f2f2f2;text-align:center;}
.footer-top h3 {line-height: 40px;font-size: 24px;color: #5FB878;font-weight: bold}
.footer-top h3 span {margin: 0 5px;color: #FF563F;}
.footer-link {}
.footer-link a {margin:0 20px;line-height: 30px;}


/* settings */
.settings-tab {margin: 20px 0;}
.settings-tab .layui-this {color: #009688;font-size: 16px;}

.avatar-add{position:relative; width:373px; height:373px; background-color:#F2F2F5;}
.avatar-add .upload-img{position:absolute; left:50%; top:35px; margin:0 0 0 -60px;}
.avatar-add img{position:absolute; left:50%; top:50%; width:168px; height:168px; margin:-50px 0 0 -84px; border-radius:100%;}
.avatar-add .loading{display:none; position:absolute; width:100%; height:100%; left:0; top:0; padding: 0; background-color:#000; opacity:0.5; filter: Alpha(opacity=50);}
.avatar-add p{position:absolute; top:70px; width:100%; margin-top: 10px;; font-size:12px; text-align:center; color:#999;}

/* 辅助 */
.page-title{font-size:14px; margin:20px 0 10px; padding:10px; line-height:30px; border-bottom:1px solid #DFDFDF;}
.loading{background-image: url(../images/loading.gif); background-position: center center; background-repeat: no-repeat;}

/*
**滚动
*/
.picScroll{ margin:0 auto;  position:relative; width:1000px;  padding:10px 0 10px 0px; background:#fff; overflow:hidden;     }
.picScroll .prev,
.picScroll .next{ display:block; position:absolute; top:86px; left:5px; width:23px; height:23px; display: none; background:url(../images/superslide/btns.png) no-repeat;   }
.picScroll .next{ left:auto; right:5px; background-position:-25px 0; }
.picScroll .prev:hover{ background-position:0 -30px; }
.picScroll .next:hover{ background-position:-25px -30px; }
.picScroll ul{ overflow:hidden; zoom:1; }
.picScroll ul li{ width:180px; float:left; overflow:hidden; padding:0 5px;     }
.picScroll ul li img{ width:180px; height:180px; display:block; background:url(../images/superslide/loading.gif) center center no-repeat; }


/*
**music
*/
.music-categroy-list {margin: 20px 0 0 0}
.music-categroy-list li {float: left;display: inline-block;width: 400px;height: 428px;overflow: hidden;padding: 0 50px 30px 50px;line-height: 1.4;}
.music-categroy-list li p {width: 100%;margin: 10px 0 10px;}
.categroy-cover {position:relative;display: block;width: 400px;height: 400px;}
.categroy-cover img {display: block;width: 100%;height: 100%;}
.categroy-cover .msk {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: 0 0;}
.categroy-name {text-align: center;font-size: 20px;}
.categroy-name a {color:#5FB878;}
.categroy-name a:hover {color:#FF563F;}

.music-list {margin: 20px 0 0 -25px}
.music-list li {float: left;display: inline-block;width: 180px;height: 228px;overflow: hidden;padding: 0 0 30px 25px;line-height: 1.4;}
.music-list li p {width: 100%;margin: 10px 0 10px;}
.music-cover {position:relative;display: block;width: 180px;height: 180px;}
.music-cover img {display: block;width: 100%;height: 100%;}
.music-cover .msk {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: 0 0;}
.music-name {text-align: center;font-size: 14px;}
.music-name a:hover {color:#FF563F;}

/* 个人主页 */
.user-home{padding: 30px 0 98px;text-align: center;background-color: #f2f2f2;}
.user-home img{width:120px; height:120px; border-radius:100%;}
.user-home h1{font-size:26px; line-height:30px; margin-top:10px;}
.user-home h1 span{font-size:14px; color:#999;}
.home-nav{margin: 20px 0; text-align:center; font-size:0;}
.home-nav a{position:relative; padding:0 30px;  display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:18px; color:#666;}
.home-nav a:first-child::before{display:none;}
.home-nav a::before{content:''; position:absolute; left:0; top:5px; width:1px; height:16px; background-color:#ccc;}
.home-left{width:680px; float:left;}
.home-left h2{line-height:40px; margin-bottom:15px; padding:0 10px; background-color:#FAFAFA;}
.home-right{width:300px; float:right;}
.home-info{padding:20px 0; background-color:#FAFAFA;}
.home-info li{padding:0 20px; line-height:30px;}
.home-info li i{padding-right:10px; color:#666;}
.home-info li span{color:#999;}